import {useEffect,useState} from 'react'
import {getGroupBuyProduct} from '../api/purchase'
import { Pagination } from 'antd';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
interface Iprops {
  groupInfo:any
}

const columns: ColumnsType<any> = [
  {
    title: '商品编码',
    dataIndex: 'pid',
    key: 'pid',     
  },
  {
    title: '图片',
    dataIndex: 'gallery',
    key: 'gallery',  
    render:(text:any)=>{
      var  urls 
      if(text.includes(',')){
        urls = text.split(",")
      }else{
        urls = text.split("|")
      }
      return <img width="100" src={urls[0]} alt=''/>
    }   
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'pid',     
  },
  {
    title: '规格',
    dataIndex: 'specs',
    key: 'specs',     
  },
  {
    title: '正常价（元)',
    dataIndex: 'price',
    key: 'price',     
  },
  {
    title: '促销价（元）',
    dataIndex: 'salePrice',
    key: 'salePrice',     
  },
  {
    title: '佣金比例%',
    dataIndex: 'rate',
    key: 'rate',     
    render:(text:any)=>(text*100+'%')
  },
  {
    title: '每人限购',
    dataIndex: 'limitBuy',
    key: 'limitBuy',     
  },
  {
    title: '活动总量',
    dataIndex: 'stock',
    key: 'stock',     
  },
  {
    title: '展示排序',
    dataIndex: 'rank',
    key: 'rank',     
  }
  
]
function ProductList(props:Iprops) {
  const groupInfo = props.groupInfo
  const [pList,setPList] = useState([])
  const [pagination,setPagination] = useState({current:1,pageSize:2,total:3})

  useEffect(()=>{
    getGroupBuyProduct({groupBuyId:groupInfo.id,size:pagination.pageSize,current:pagination.current})
    .then(res=>{
      setPList(res.data.data)
      const pa = res.data.pagnation;
      setPagination({
        current:pa.current,
        pageSize:pa.size,
        total:pa.total,
      })

    })
  },[pagination.current])
  return ( <div>
    <h2>商品列表</h2>
    <Table columns={columns} dataSource={pList}   pagination={false} />
    <Pagination  
    onChange={current=>{setPagination({...pagination,current:current})}} 
    total={pagination.total}
    pageSize={pagination.pageSize}
    current={pagination.current}
    />
    <p>{JSON.stringify(pList)}</p>
    <hr/>
    <p>{JSON.stringify(groupInfo)}</p>
    </div> );
}

export default ProductList;